import React from 'react'
import './product.scss'
import MyIcon from '../../../../common/MyIcon.js'
import {Row,Select,message, Col,Button,Cascader,Space,Form, Input, Table,Switch,Pagination  } from 'antd'
import { SearchOutlined,EditOutlined } from '@ant-design/icons';
import {productList,changePublishStatus} from '../../../../api/pms/productApi.js'
import {getProductCategoryList} from '../../../../api/pms/productCategoryApi.js'
import {getBrandList} from '../../../../api/pms/brand.js'

const { Option } = Select;

export default class extends React.Component{

	state = {
	    selectedRowKeys: [], // Check here to configure the default column
	    loading: false,
		dataList:[],
		total:0,
		productCategoryOptions:[],  //商品分类数据
		brandList:[],  //商品品牌列表
		queryParam:{
			pageNum:1,
			pageSize:3,
			productCategoryId:null
		},
		selectionIds:[],
		optionValues:null
	  };


 onSelectChange = selectedRowKeys => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  };
  
  getList=()=>{
	 
	  productList(this.state.queryParam)
	  .then(data=>{
	  		  console.log("商品列表",data);
			  data.data.list.forEach(item=>{
				  item.key = item.id
			  })
	  		  this.setState({
	  			  dataList:data.data.list,
				  total:data.data.total
	  		  })
	  })
  }
  
  componentDidMount(){
	 this.getList();
	 //获取商品分类数据
	 getProductCategoryList()
	 .then(data=>{
		 console.log("返回的数据。。。",data);
		 data.data.forEach(item=>{
			 item.value = item.id;
			 item.label = item.name;
			 if(item.children){
				 item.children.forEach(item2=>{
					 item2.value = item2.id;
					 item2.label = item2.name;
				 })
			 }
		 })
		 this.setState({
			 productCategoryOptions:data.data
		 })
	 })
	 
	 //获取品牌列表
	 getBrandList()
	 .then(data=>{
			console.log("获取品牌列表",data.data); 
			this.setState({
				brandList:data.data
			})
			
	 })
  }
  
  changeStatus=(a,id)=>{
	changePublishStatus({ids:id,publishStatus:a?1:0})
	.then(data=>{
		if(data.code == 200){
			message.success({
				content: data.message,
				duration:2
			  })
			}
	})
	  
  }
  
  onFinish=(values)=>{
	  console.log(values)
	  values.pageNum = 1;
	  
	  this.setState({
		  queryParam:Object.assign({},this.state.queryParam,values)
	  },()=>{
		  this.getList();
	  })
  }
  
  //商品分类内容改变触发事件
  productCategoryChange=(values)=>{
	  console.log("--------->",values[1])
	  this.setState({
		  queryParam:Object.assign({},this.state.queryParam,{productCategoryId:values[1]})
	  })
  }
  
  //批量数据下拉选中触发事件
  batchChangeHandler=(value)=>{
	  this.setState({
		  optionValues:value
	  })
  }
  
  //批量操作确定按钮
  handleClick=()=>{
	  let value = this.state.optionValues;
	  let str = value.split(":");   //  publishStatus:1
	  let name = str[0];
	  let status = str[1];
	  switch(name){
	  		  case "publishStatus":
	  			changePublishStatus({
	  				ids:this.state.selectionIds.join(","),
	  				publishStatus:status
	  			}).then(data=>{
					//页面要更新  -- 最快的方式，重新给后发请求拿到数据
					//效率最好的方式，想办法直接修改页面
					this.getList();
					
				})
	  		  break;
	  		  case "recommandStatus":
	  		  
	  		  break;
	  		  case "newStatus":
	  		  
	  		  break;
	  }
  }
  
  pageChange=(pageNum,pageSize)=>{
	//react中setState方式是异步的。
	let pn = 0,ps = 0;
	
	if(pageSize == this.state.queryParam.pageSize){
		pn = pageNum;
	}else{
		pn = 1;
	}
	ps=pageSize;
	
	this.setState({
	  queryParam:{
		  pageNum:pn,
		  pageSize:ps
	  }
	},()=>{
		this.getList();
	})
  }
 
	render(){
		const columns = [
		  {
		    title: '编号',
		    dataIndex: 'id',
			align:"center"
		  },
		  {
		    title: '商品图片',
			align:"center",
			key:"pic",
			render(rowData){
				return <img src={rowData.pic} width="70"/>
			}
		  },
		  {
		    title: '商品名称',
		    dataIndex: 'name',
			align:"center",
			
		  },
		  {
		    title: '价格/货号',
			align:"center",
			width:140,
			dataIndex:"price",
			
			render(rowData){
				return <>
					<p>价格：{rowData.price}</p>
					<p>货号：{rowData.productSn}</p>
				</>
			}
		  },
		  {
		    title: '标签',
			align:"center",
			width:140,
			render:(rowData)=>{
				return <>
					<p>上架{rowData.publishStatus}：
					{rowData.publishStatus==1?<Switch defaultChecked onChange={(isCheck)=>{
						this.changeStatus(isCheck,rowData.id);
					}} /> : <Switch onChange={(isCheck)=>{
						this.changeStatus(isCheck,rowData.id);
					}} /> }</p>
					<p>新品{rowData.newStatus}：<Switch defaultChecked onChange={this.changeStatus}></Switch></p>
					<p>推荐{rowData.recommandStatus}：<Switch defaultChecked onChange={this.changeStatus}></Switch></p>
				</>
			}
		  },
		  {
		    title: '排序',
			align:"center",
			
		    dataIndex: 'sort',
		  },
		  {
		    title: 'SKU库存',
			align:"center",
			
			render:()=>{
				return <Button type="primary" shape="circle" icon={<EditOutlined />} />
			}
		  },
		  {
		    title: '审核状态',
			align:"center",
			
		    dataIndex: 'verifyStatus',
			render:()=>{
				return <>
					<p>未审核</p>
					<p><a href="#">审核详情</a></p>
				</>
			}
		  },
		  {
		    title: '操作',
			align:"center",
			width:140,
		    dataIndex: 'buhaoshuo',
			render:()=>{
				return <>
					<p>
					<Button size="small">查看</Button>
					<Button size="small">编辑</Button>
					</p>
					<p>
					<Button size="small">日志</Button>
					<Button size="small" type="primary" danger>删除</Button>
					</p>
				</>
			}
		  }
		];
		
		
		
		const { loading, selectedRowKeys } = this.state;
		    const rowSelection = {
		      type:"checkbox",
		      onChange: (selectedRowKeys, selectedRows) => {
		         console.log(selectedRowKeys, selectedRows);
				 //将选中的id保存起来， 批量操作，操作的对象就是选中的内容  
				 // update product set publishStatus = 0或者1 where pid = 1 or pid = 2 or pid = 3
				 this.setState({
					 selectionIds:selectedRowKeys
				 })
		       },
		       getCheckboxProps: (record) => ({
		         disabled: record.name === 'Disabled User',
		         // Column configuration not to be checked
		         name: record.name,
		       }),
		    };
			
			
		//生成品牌下拉列表
		let brandSelect = "";
		if(this.state.brandList){
			brandSelect = this.state.brandList.map(item=>{
				return <Option value={item.id}>{item.name}</Option>
			})
		}
			
		return <div className="product-list-box">
			<div className="search-box">
			<Form 
			size="small"
			onFinish={this.onFinish}
			>
			<Row>
				<Col span={12}>
				<SearchOutlined />
				筛选搜索</Col>
				<Col span={12} style={{textAlign:"right"}}>
					<Space>
						<Button size="small">重置</Button>
						<Button htmlType="submit" size="small" type="primary">查询结果</Button>
					</Space>
				</Col>
			</Row>
			
			<Row>
				<Col sm={24} md={12} lg={8}>
					<Form.Item
					        label="输入搜索："
					        name="keyword"
					      >
					        <Input placeholder="商品名称"/>
					      </Form.Item>
				</Col>
				<Col sm={24} md={12} lg={8}>
					<Form.Item 
						label="商品货号："
						name="productSn">
					        <Input placeholder="商品货号"/>
						</Form.Item>
				</Col>
				<Col sm={24} md={12} lg={8}>
					<Form.Item 
						label="商品分类：">
					        <Cascader 
							onChange={this.productCategoryChange}
							options={this.state.productCategoryOptions} 
							placeholder="请选择" />,
						</Form.Item>
				</Col>
				<Col sm={24} md={12} lg={8}>
					<Form.Item 
						label="商品品牌："
						name="brandId">
					        <Select
							allowClear
							placeholder="请选择品牌"
							>
								{brandSelect}
							</Select>
						</Form.Item>
				</Col>
				<Col sm={24} md={12} lg={8}>
					<Form.Item 
						label="上架状态："
						name="publishStatus">
						<Select  placeholder="全部" allowClear>
							<Option value={1}>上架</Option>
							<Option value={0}>下架</Option>
						</Select>
						</Form.Item>
				</Col>
				<Col sm={24} md={12} lg={8}>
					<Form.Item 
						label="审核状态："
						name="verifyStatus" >
					        <Select placeholder="全部" allowClear>
					        	<Option value={1}>已审核</Option>
					        	<Option value={0}>未审核</Option>
					        </Select>
						</Form.Item>
				</Col>
			</Row>
			</Form>
			</div>
			
				<div className="table-box">
					<Table 
					bordered
					rowkey="id"
					rowSelection={rowSelection} 
					columns={columns} 
					pagination={false}
					dataSource={this.state.dataList} />
					<Row justify="space-bettwen" style={{padding:"15px 10px"}}>
						<Col span={12}>
							<Select style={{width:"100px"}} onChange={this.batchChangeHandler}>
								<Option key="1" value="publishStatus:1">商品上架</Option>
								<Option key="2" value="publishStatus:0">商品下架</Option>
								<Option key="3" value="recommandStatus:1">设为推荐</Option>
								<Option key="4" value="recommandStatus:0">取消推荐</Option>
								<Option key="5" value="newStatus:1">设为新品</Option>
								<Option key="6" value="newStatus:0">取消新品</Option>
								
							</Select>
							<Button type="primary" onClick={this.handleClick}>确定</Button>
						</Col>
						<Col  span={12}  style={{textAlign:"right"}}>
							<Pagination
							   total={this.state.total}
													onChange={this.pageChange}
							   showSizeChanger
							   showQuickJumper
													defaultPageSize={this.state.queryParam.pageSize}
													current={this.state.queryParam.pageNum}
													pageSizeOptions={[3,5,10,20]}
							   showTotal={total => `共 ${total} 条`}
							 />
						</Col>
					</Row>
				</div>
				
		</div>
	}

}